<template>
  <div class="bg-white rounded-lg overflow-hidden my-2 mx-4 w-[calc(100%-2rem)]">
    <div
      v-for="(product, index) in products"
      :key="index"
      class="flex justify-between items-center p-3 border-b border-gray-100 last:border-b-0">
      <div class="flex items-center flex-1">
        <div class="relative mr-3">
          <div
            class="absolute -top-1 -right-1 bg-orange-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold z-10">
            {{ product.quantity }}
          </div>
          <img :src="product.picUrl" class="w-10 h-10 rounded-lg" alt="" />
        </div>
        <div class="flex-1">
          <h3 class="text-sm font-medium text-gray-800 mb-1">{{ product.region }}</h3>
          <p class="text-xs text-gray-600 m-0">{{ product.selectedText }}</p>
        </div>
      </div>
      <div class="text-right">
        <div class="text-xs text-gray-400 line-through mb-0.5" v-if="product.marketPrice">RM {{ formatToYuan(product.marketPrice) }}</div>
        <div class="text-base font-bold text-gray-800">RM {{ formatToYuan(product.price) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatToYuan } from "@/utils/common"
export default {
  name: "ProductSummary",
  props: {
    products: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      formatToYuan,
    }
  },
}
</script>

<style scoped></style>
